<template>
  <div class="home">
    <p>蓍草起卦法《周易》</p>
    <p>大衍之数五十，其用四十有九。分而为二以象两，挂一以象三，揲之以四以象四时，归奇于仂以象闰。五岁再闰，故再仂而后挂</p>
    <p>天一地二，天三地四，天五地六，天七地八，天九地十。天数五、地数五，五位相得而各有合。天数二十有五、地数三十，凡天地之数五十有五。此所以成变化而行鬼神也</p>
    <p>《乾》之策二百一十有六，《坤》之策百四十有四，凡三百六十，当期之日。二篇之策，万有一千五百二十，当万物之数也。</p>
    <p>是故四营而成易，十有八变而成卦，八卦而小成。引而伸之，触类而长之，天下之能事毕矣。显道神德行，是故可与酬酢，可与佑神矣。</p>
    <p>子曰：知变化之道者，其知神之所为乎。</p>
    <el-button type="primary" @click="start" style="background: #409EFF">开始</el-button>
    <el-button type="primary" @click="clear" style="background: #409EFF">清空</el-button>
    <!-- <el-checkbox v-model="auto" label="是否自动18变" style="margin-left: 10px"></el-checkbox> -->
    <el-divider></el-divider>
    <div class="result">
      <div class="content" v-show="isShow">
        <div class="msg_left" style="float: left;margin-right:20px;">
          <div class="img" v-if="result_code">
            <!-- <img class="img" :src="curImg" style="width:100%;height:100%" /> -->
            <symbol-component :symbol="result_code"></symbol-component>
          </div>
        </div>
        <div class="msg_right" v-html="result_msg" style="display: inline-block;margin-top:5px"></div>
      </div>
      <div class="ext">
        <p>互卦是本卦的2、3、4爻与3、4、5爻组成的卦;错卦是本卦的所有爻由阳变阴或者由阴变阳而形成的卦;综卦是将本卦颠倒后而得到的卦</p>
        <div class="img" v-if="result_code_h">
          <span>互卦：</span>
          <!-- <img class="img" :src="curImg_h" style="width:35px;height:35px" /> -->
          <small-symbol-component :symbol="result_code_h"></small-symbol-component>
          <span>{{result_msg_h}}</span>
        </div>
        <div class="img" v-if="result_code_r">
          <span>错卦：</span>
          <!-- <img class="img" :src="curImg_r" style="width:35px;height:35px" /> -->
          <small-symbol-component :symbol="result_code_r"></small-symbol-component>
          <span>{{result_msg_r}}</span>
        </div>
        <div class="img" v-if="result_code_a">
          <span>综卦：</span>
          <!-- <img class="img" :src="curImg_a" style="width:35px;height:35px" /> -->
          <small-symbol-component :symbol="result_code_a"></small-symbol-component>
          <span>{{result_msg_a}}</span>
        </div>
        <div style="padding-top:10px">
          <p>变卦有六个：</p>
          <div class="img" v-if="result_code_change_1">
            <span>动初爻：</span>
            <!-- <img class="img" :src="curImg_change_1" style="width:35px;height:35px" /> -->
            <small-symbol-component :symbol="result_code_change_1"></small-symbol-component>
            <span>{{result_msg_change_1}}</span>
          </div>
          <div class="img" v-if="result_code_change_2">
            <span>动二爻：</span>
            <!-- <img class="img" :src="curImg_change_2" style="width:35px;height:35px" /> -->
            <small-symbol-component :symbol="result_code_change_2"></small-symbol-component>
            <span>{{result_msg_change_2}}</span>
          </div>
          <div class="img" v-if="result_code_change_3">
            <span>动三爻：</span>
            <!-- <img class="img" :src="curImg_change_3" style="width:35px;height:35px" /> -->
            <small-symbol-component :symbol="result_code_change_3"></small-symbol-component>
            <span>{{result_msg_change_3}}</span>
          </div>
          <div class="img" v-if="result_code_change_4">
            <span>动四爻：</span>
            <!-- <img class="img" :src="curImg_change_4" style="width:35px;height:35px" /> -->
            <small-symbol-component :symbol="result_code_change_4"></small-symbol-component>
            <span>{{result_msg_change_4}}</span>
          </div>
          <div class="img" v-if="result_code_change_5">
            <span>动五爻：</span>
            <!-- <img class="img" :src="curImg_change_5" style="width:35px;height:35px" /> -->
            <small-symbol-component :symbol="result_code_change_5"></small-symbol-component>
            <span>{{result_msg_change_5}}</span>
          </div>
          <div class="img" v-if="result_code_change_6">
            <span>动上爻：</span>
            <!-- <img class="img" :src="curImg_change_6" style="width:35px;height:35px" /> -->
            <small-symbol-component :symbol="result_code_change_6"></small-symbol-component>
            <span>{{result_msg_change_6}}</span>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="log">
        <p style="font-weight: bold">演算记录：</p>
        <p v-for="(item,index) in log" :key="index">{{item}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getZyData } from '../../api/data'
import SymbolComponent from '../../components/Symbol.vue'
import SmallSymbolComponent from '../../components/SmallSymbol.vue'

export default {
  name: 'HomeView',
  components: {
    SymbolComponent,
    SmallSymbolComponent
  },
  data () {
    return {
      test: '0,1,0,0,1,1',
      isShow: false,
      auto: true,
      result_code: '',
      result_msg: '',
      log: [],
      result_code_h: '',
      curImg: null,
      curImg_h: null,
      result_msg_h: '',
      result_code_r: '',
      curImg_r: null,
      result_msg_r: '',
      result_code_a: '',
      curImg_a: null,
      result_msg_a: '',
      result_code_change_1: '',
      curImg_change_1: null,
      result_msg_change_1: '',
      result_code_change_2: '',
      curImg_change_2: null,
      result_msg_change_2: '',
      result_code_change_3: '',
      curImg_change_3: null,
      result_msg_change_3: '',
      result_code_change_4: '',
      curImg_change_4: null,
      result_msg_change_4: '',
      result_code_change_5: '',
      curImg_change_5: null,
      result_msg_change_5: '',
      result_code_change_6: '',
      curImg_change_6: null,
      result_msg_change_6: ''
    }
  },
  methods: {
    start () {
      getZyData().then(res => {
        this.clear()
        // console.log(res)
        const { status, data } = res.data
        if (status === 'success') {
          // console.log(data)
          this.isShow = true
          if (data.result_code) {
            this.result_code = data.result_code
            if (this.result_code) {
              // this.curImg = require('../../assets/images/' + this.result_code.replace(/,/g, '').replace('(', '').replace(')', '') + '.png')
              // this.curImg = require('../../assets/images/c_111111.png')
            }
            this.result_code = this.result_code.replace('(', '').replace(')', '')
            this.result_msg_h = data.result_msg_h
            // const result_code_h = data.result_code_h
            // if (result_code_h) {
            //   this.curImg_h = require('../../assets/images/' + result_code_h.replace(/,/g, '').replace('(', '').replace(')', '') + '.png')
            // }
            this.result_code_h = data.result_code_h
            this.result_code_h = this.result_code_h.replace('(', '').replace(')', '')
            this.result_msg_r = data.result_msg_r
            // const result_code_r = data.result_code_r
            // if (result_code_r) {
            //   this.curImg_r = require('../../assets/images/' + result_code_r.replace(/,/g, '').replace('(', '').replace(')', '') + '.png')
            // }
            this.result_code_r = data.result_code_r
            this.result_code_r = this.result_code_r.replace('(', '').replace(')', '')
            this.result_msg_a = data.result_msg_a
            // const result_code_a = data.result_code_a
            // if (result_code_a) {
            //   this.curImg_a = require('../../assets/images/' + result_code_a.replace(/,/g, '').replace('(', '').replace(')', '') + '.png')
            // }
            this.result_code_a = data.result_code_a
            this.result_code_a = this.result_code_a.replace('(', '').replace(')', '')
            this.result_msg_change_1 = data.result_msg_change_1
            this.result_msg_change_2 = data.result_msg_change_2
            this.result_msg_change_3 = data.result_msg_change_3
            this.result_msg_change_4 = data.result_msg_change_4
            this.result_msg_change_5 = data.result_msg_change_5
            this.result_msg_change_6 = data.result_msg_change_6

            // const result_code_change_1 = data.result_code_change_1
            // if (result_code_change_1) {
            //   this.curImg_change_1 = require('../../assets/images/' + result_code_change_1.replace(/,/g, '').replace('(', '').replace(')', '') + '.png')
            // }
            this.result_code_change_1 = data.result_code_change_1
            this.result_code_change_1 = this.result_code_change_1.replace('(', '').replace(')', '')
            // const result_code_change_2 = data.result_code_change_2
            // if (result_code_change_2) {
            //   this.curImg_change_2 = require('../../assets/images/' + result_code_change_2.replace(/,/g, '').replace('(', '').replace(')', '') + '.png')
            // }
            this.result_code_change_2 = data.result_code_change_2
            this.result_code_change_2 = this.result_code_change_2.replace('(', '').replace(')', '')
            // const result_code_change_3 = data.result_code_change_3
            // if (result_code_change_3) {
            //   this.curImg_change_3 = require('../../assets/images/' + result_code_change_3.replace(/,/g, '').replace('(', '').replace(')', '') + '.png')
            // }
            this.result_code_change_3 = data.result_code_change_3
            this.result_code_change_3 = this.result_code_change_3.replace('(', '').replace(')', '')
            // const result_code_change_4 = data.result_code_change_4
            // if (result_code_change_4) {
            //   this.curImg_change_4 = require('../../assets/images/' + result_code_change_4.replace(/,/g, '').replace('(', '').replace(')', '') + '.png')
            // }
            this.result_code_change_4 = data.result_code_change_4
            this.result_code_change_4 = this.result_code_change_4.replace('(', '').replace(')', '')
            // const result_code_change_5 = data.result_code_change_5
            // if (result_code_change_5) {
            //   this.curImg_change_5 = require('../../assets/images/' + result_code_change_5.replace(/,/g, '').replace('(', '').replace(')', '') + '.png')
            // }
            this.result_code_change_5 = data.result_code_change_5
            this.result_code_change_5 = this.result_code_change_5.replace('(', '').replace(')', '')
            // const result_code_change_6 = data.result_code_change_6
            // if (result_code_change_6) {
            //   this.curImg_change_6 = require('../../assets/images/' + result_code_change_6.replace(/,/g, '').replace('(', '').replace(')', '') + '.png')
            // }
            this.result_code_change_6 = data.result_code_change_6
            this.result_code_change_6 = this.result_code_change_6.replace('(', '').replace(')', '')
            if (data.result_msg) {
              for (let key in data.result_msg) {
                this.result_msg += data.result_msg[key].replace(/\n/g, '<br />')
              }
            }
            this.log = data.log
          }
        }
      })
    },
    clear () {
      this.isShow = false
      this.log = []
      this.curImg = null
      this.result_code = ''
      this.result_msg = ''
      this.curImg_h = null
      this.result_code_h = null
      this.result_msg_h = ''
      this.curImg_r = null
      this.result_code_r = null
      this.result_msg_r = ''
      this.curImg_a = null
      this.result_code_a = null
      this.result_msg_a = ''
      this.curImg_change_1 = null
      this.curImg_change_2 = null
      this.curImg_change_3 = null
      this.curImg_change_4 = null
      this.curImg_change_5 = null
      this.curImg_change_6 = null
      this.result_code_change_1 = null
      this.result_code_change_2 = null
      this.result_code_change_3 = null
      this.result_code_change_4 = null
      this.result_code_change_5 = null
      this.result_code_change_6 = null
      this.result_msg_change_1 = ''
      this.result_msg_change_2 = ''
      this.result_msg_change_3 = ''
      this.result_msg_change_4 = ''
      this.result_msg_change_5 = ''
      this.result_msg_change_6 = ''
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  padding: 10px;
  .ext {
    .img {
      // border: 1px solid red;
      display: flex;
      padding: 5px;
    }
  }
}
</style>